<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="创建下载" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="parameterBox">
			<view class="itemBox">
				<text class="title">开始日期</text>
				<text class="info unselected" @click="timeCheck(1)">选择</text>
			</view>
			<view class="itemBox">
				<text class="title">开始时间</text>
				<text class="info unselected" @click="timeCheck(2)">选择</text>
			</view>
			<view class="itemBox">
				<text class="title">结束日期</text>
				<text class="info unselected" @click="timeCheck(3)">选择</text>
			</view>
			<view class="itemBox">
				<text class="title">结束时间</text>
				<text class="info unselected" @click="timeCheck(4)">选择</text>
			</view>
			<view class="itemBox">
				<text class="title">接收邮箱</text>
				<input class="email" type="text" placeholder="请输入邮箱" placeholder-class="emailPlaceholder"/>
			</view>
		</view>
		<view class="typeBox">
			<view 
				class="itemBox"
				v-for="(item) in typeArray"
				:key="item.type"
				:class="{typeCheck:typeActive.includes(item.type)}"
				@click="typeCheck(item.type)"
			>
				<text>{{item.label}}</text>
				<uni-icons v-show="typeActive.includes(item.type)" class="icon" type="checkmarkempty" color="#ffbc03" size="22"></uni-icons>
			</view>
		</view>
		<view class="buttonBox">
			<button class="reset">重置</button>
			<button class="submit">提交</button>
		</view>
		
		<!--时间选择弹出层-->
		<uni-popup ref="timePopup" background-color="#fff">
			<view class="timePopup">
				<view class="actionBar">
					<button class="cancel">取消</button>
					<text class="title">{{timePopupTitle}}</text>
					<button class="confirm">确定</button>
				</view>
				<view class="TimeBox">
					<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="customTimeValue" @change="bindChange">
						<picker-view-column>
							<view class="item" v-for="(item,index) in pickerArray[0]" :key="index">{{item}}{{pickerKey[pickerType][0]}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in pickerArray[1]" :key="index">{{item}}{{pickerKey[pickerType][1]}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in pickerArray[2]" :key="index">{{item}}{{pickerKey[pickerType][2]}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import dates from '@/common/utils/date.js';
	import times from '@/common/utils/time.js';
	export default{
		data(){
			return{
				pickerKey:[
					["年","月","日"],
					["时","分","秒"]
				],
				pickerType:0,
				customTimeValue:[0,0,0],
				timeCheckType:0,
				timePopupTitle:"",
				staDate:null,
				staDatePicker:[],
				staTime:null,
				staTimePicker:[],
				endDate:null,
				endDatePicker:[],
				endTime:null,
				endTimePicker:[],
				typeActive:[1],
				typeArray:[
					{type:1,label:"订单"},
					{type:2,label:"积分"},
					{type:3,label:"退款"},
					{type:4,label:"应收款"},
				]
			}
		},
		computed:{
			pickerArray(){
				let data = [];
				if([1,3].includes(this.timeCheckType)){
					let years = [];
					let months = [];
					let days = [];
					let yearIndex = this.customTimeValue[0];
					let monthIndex = this.customTimeValue[1];
					years = dates.years;
					months = dates.months[yearIndex];
					days = dates.days[yearIndex][monthIndex];
					data = [years,months,days];
				}else if([2,4].includes(this.timeCheckType)){
					data = times;
				}
				return data;
			}
		},
		mounted() {
			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			let yearIndex = dates.years.indexOf(year.toString());
			this.customTimeValue = [yearIndex,(month - 1),(day - 1)];
		},
		methods:{
			bindChange: function (e) {
				const val = e.detail.value
				this.customTimeValue = val;
			},
			typeCheck(type)
			{
				if(type == 1) return ;
				if(this.typeActive.includes(type))
				{
					//移除
					const index = this.typeActive.indexOf(type);
					this.typeActive.splice(index, 1);
				}else{
					//增加
					this.typeActive.push(type)
				}
			},
			timeCheck(ob){
				this.timeCheckType = ob;
				if([1,3].includes(ob)){
					this.timePopupTitle = "选择日期"
					this.pickerType = 0;
				}else if([2,4].includes(ob)){
					this.timePopupTitle = "选择时间"
					this.pickerType = 1;
				}
				this.$refs.timePopup.open('bottom');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.parameterBox{
		width: 100%;
		height: auto;
		float: left;
		margin-top: 20rpx;
		background-color: #fff;
		.itemBox{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			.title{
				width: auto;
				float: left;
				font-size: 30rpx;
				color: rgb(55, 55, 55);
			}
			.info{
				flex: 1;
				float: right;
				text-align: right;
				font-size: 30rpx;
			}
			.unselected{
				color: rgb(237, 191, 70);
			}
			.email{
				flex: 1;
				float: right;
				text-align: right;
				font-size: 29rpx;
			}
		}
	}
	.typeBox{
		width: 100%;
		height: auto;
		float: left;
		margin-top: 20rpx;
		background-color: #fff;
		padding-bottom: 30rpx;
		padding-top: 10rpx;
		.itemBox{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			border-radius: 6rpx;
			margin-top: 20rpx;
			border: 1rpx solid #f5f5f5;
			text{
				flex: 1;
				margin-left: 3%;
				font-size: 27rpx;
				color: rgb(52, 52, 52);
				font-weight: 450;
			}
			.icon{
				margin-right: 3%;
			}
		}
		.typeCheck{
			border-color:#ffbc03;
			background-color: #ffeeb8;
			text{
				color: #ffbc03;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: 145rpx;
		background-color: #FFF;
		position: fixed;
		bottom: 0;
		.reset{
			width: calc(50% - 45rpx);
			float: left;
			margin-left: 30rpx;
			height: 85rpx;
			margin-top: 20rpx;
			border: 2rpx solid #ffbc03;
			background-color: #fff;
			color: #ffbc03;
			font-size: 32rpx;
		}
		.submit{
			width: calc(50% - 45rpx);
			float: right;
			margin-right: 30rpx;
			height: 85rpx;
			margin-top: 20rpx;
			background-color: #ffbc03;
			color: #fff;
			font-size: 32rpx;
		}
		.submit::after,.reset::after{
			border-width: 0rpx;
		}
	}
	.timePopup{
		width: 100%;
		height: auto;
		float: left;
		.actionBar{
			width: 100%;
			height: 90rpx;
			float: left;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			.cancel,.confirm{
				width: auto;
				font-size: 30rpx;
				background-color: rgba(0,0,0,0);
			}
			.cancel::after,.confirm::after{
				border-width: 0rpx;
			}
			.cancel{
				float: left;
				margin-left: 20rpx;
				color: rgb(117,117,117);
			}
			.confirm{
				float: right;
				margin-right: 20rpx;
				color: #ffbc03;
			}
			.title{
				flex: 1;
				text-align: center;
				font-size: 33rpx;
				font-weight: bold;
				color: rgb(20,20,20);
			}
		}
		.TimeBox{
			width: calc(100% - 40rpx);
			float: left;
			margin-left: 20rpx;
			margin-top: 10rpx;
			height: 370rpx;
			.picker-view{
				width: 100%;
				height: 100%;
				float: left;
				.item{
					line-height: 40px;
					text-align: center;
				}
			}
		}
	}
</style>
<style>
	.emailPlaceholder{
		color: rgb(151, 151, 151);
	}
</style>